<template>
    <!--    要用一个div包裹里边内容，否则报错,只能有一个根节点-->
    <div>
        <el-form class="login-box" ref="loginForm" :model="form" :rules="rules" label-width="80px">
            <h3 class="login-title">欢迎登录</h3>
            <el-form-item label="账号" prop="username">
                <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="form.password"
                          @keyup.enter.native="onSubmit('loginForm')"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="onSubmit('loginForm')">登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script>
    import {login} from "../request/api.js"; // 导入js方法,用来提交表单数据
    import {Message} from 'element-ui'  //ele 消息提示框
    import router from "../router";

    export default {
        name: "login",
        data() {  // 声明数据
            return {
                form: {  //声明表单 用来请求服务器,没有接口可以先用mock
                    username: '',  //zhanghao
                    password: ''     //mima
                },
                // 表单验证
                rules: {
                    username: [
                        {required: true, message: "账号不可以为空", trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: "密码不可以为空", trigger/*trigger:'blur' 触发器：失去焦点提示“密码不为空”*/: 'blur'}
                    ]

                }
            }

        },
        methods: {
            onSubmit() { // 绑定验证功能
                var info = {
                    data: JSON.stringify(
                        { // 将表单数据转化为JSON格式
                            username: this.form.username,
                            password: this.form.password
                        })
                }
                // 访问接口 提交表单数据info  接口返回数据用data
                login(info).then(function (data) {
                    var msgCode = data.data["code"]
                    if (msgCode == 200) {
                        // 将接口返回内容存取session中
                        sessionStorage.setItem("uuid", data.data.data["uuid"]);
                        sessionStorage.setItem("token", data.data.data["token"]);
                        sessionStorage.setItem("position", data.data.data["type"]);
                        sessionStorage.setItem("uname", data.data.data["uname"]);
                        // 跳转页面
                        router.replace({path: "/home"})
                    }
                    if (msgCode == 201) {
                        Message.error(data.data["error 201"])
                        this.openVn()
                    }
                }).catch(() => {
                    this.$message({
                        type: 'error',
                        message: '账号密码错误，请检查'
                    });
                })
            }
        }
    }


</script>

<style lang="scss" scoped>
    .login-box {
        border: 2px solid #DCDFE6;
        width: 400px;
        margin: 100px auto;
        border-radius: 20px;
        padding: 35px 35px 15px 35px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        box-shadow: 0 0 10px #909399;
        position: relative;
        background-color: #8cc5ff;
    }

    .login-title {
        text-align: center;
        margin: 20px;
    }
</style>